@import "./mixin.scss";

/* variables */
$menu-text-width: 80px;

.menu-item{
  @include ellipsis;
  i{
    vertical-align: middle;
    font-size: 16px;
  }
  span{
    display: inline-block;
    width: $menu-text-width;
    @include ellipsis;
    vertical-align: bottom;
  }
}


/*

$menu-text-width: 80px;

.menu-item{
  i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }
  span{
    display: inline-block;
    width: $menu-text-width;
    @include ellipsis;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }
  &.collapsed-menu{
    i{
      transform: translateX(5px);
      transition: font-size .2s ease .2s, transform .2s ease .2s;
      vertical-align: middle;
      font-size: 22px;
    }
    span{
      width: 0px;
      transition: width .2s ease;
    }
  }
}
*/
